<template>
    <view class="task-list">
        <uni-nav-bar fixed left-icon="left" title="跟进任务" @clickLeft="backHandle" class="unibarS">
            <view @click="openHandle()" slot="right">
                <svg-icon svgPath="/static/svg/icon-shaixuan.svg" color="#0C1019" size="18px" />
            </view>
        </uni-nav-bar>
        <u-sticky bgColor="#fff">
            <view class="tab-box">
                <u-tabs :list="statusList" @click="tabClick"></u-tabs>
            </view>
        </u-sticky>
        <!-- 数据 -->
        <view v-if="list.length" class="schedule-day-list">
            <view class="schedule-day-list-item" @click="clickItem(item)" v-for="(item, index) in list" :key="index">
                <!-- 放置左侧的颜色线 -->
                <!-- :style="getBgColor(item.taskStatus)" -->
                <view :style="{ backgroundColor: getBgColor(item.taskStatus) }" class="schedule-day-list-item-left"></view>
                <!-- 内容 -->
                <view class="schedule-day-list-item-content">
                    <!-- 左侧 -->
                    <view class="item-content-box">
                        <view class="item-content-box-text">{{ item.followupContent }}</view>
                        <view class="item-content-box-time">跟进时间：{{ item.followupTime }}</view>
                        <view class="item-content-box-avatar">
                            <u-avatar class="avatar" size="20" :src="item.avatar"></u-avatar>
                            <text>{{ item.staffName }}</text>
                        </view>
                    </view>
                    <!-- 状态 -->
                    <view :style="{ color: getBgColor(item.taskStatus) }" class="item-state-box">{{ bus_task_status[item.taskStatus] }}</view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>

        <!-- 悬浮窗 添加按钮 -->
		<uni-fab ref="fab" @fabClick="addHandle" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" />

        <!-- 筛选 -->
		<uni-popup ref="popup" type="right" @maskClick="maskClick" border-radius="10px 10px 0 0">
			<view class="drawer-box">
				<view class="drawer-content">
					<u--form labelPosition="top" ref="uForm" labelWidth="100">
						<u-form-item label="时间" border
							ref="item1">
							<view class="drawer-classify">
								<view v-for="(item, index) in tiemList" :key="index" @click="changeTime(item.value)" :class="{ active: tempSearchObj.type == item.value }">{{ item.name }}</view>
							</view>
						</u-form-item>
                        <u-form-item label="归属人员" border ref="item1">
                            <view class="flex-sub">
                                <view class="flex-sub-item" v-if="tempSearchObj.staffId">
                                    <u-avatar
                                        :src="tempSearchObj.avatar" class="avatar" :size="30">
                                    </u-avatar>
                                    <view class="name">{{ tempSearchObj.staffIdName }}</view>
                                </view>
                            </view>
                            <u-icon  @click="selectHandle()" slot="right" name="plus-circle-fill" size="30"></u-icon>
                        </u-form-item>
						<u-form-item class="search-item-box" label="时间段" @click="openCalendar()" border ref="item1">
							<view>
								<view v-if="tempSearchObj.startTime && tempSearchObj.endTime">{{ tempSearchObj.startTime + '至' + tempSearchObj.endTime }}</view>
								<view v-else>选择范围</view>
							</view>
							<u-icon slot="right" name="clock"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<view class="drawer-footer">
					<view class="drawer-footer-res" @click="reset">重置</view>
					<view class="drawer-footer-sub" @click="submit">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择跟进日期 -->
		<uni-calendar ref="calendar" class="uni-calendar--hook" :range="true" :clear-date="true" :date="infoCalendar.date"
		:insert="infoCalendar.insert" @confirm="confirmCalendar" @close="closeCalendar" />
    </view>
</template>

<script>
import { convertToDict, calculateDateRange } from '@/common/utils'
export default {
    data() {
        return {
            params: {
                followupType: 0,
                taskStatus: null,
				pageNum: 1,
				pageSize: 20,
                type: 1,
				startTime: null,
				endTime: null,
                staffId: null,
                staffIdName: null,
                avatar: null
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
            statusList: [
                { name: '全部', dictValue: null }
            ],
            dayList: [],
            pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#4DACB1',
				iconColor: '#fff'
			},
            horizontal: 'right',
			vertical: 'bottom',
			direction: 'horizontal',
            tempSearchObj: {
				type: 1,
				startTime: null,
				endTime: null,
                staffId: null,
                staffIdName: null,
                avatar: null
			},
			tiemList: [
				{ 	name: '今年', value: 1  },
				{ 	name: '本季度', value: 2  },
				{ 	name: '上季度', value: 3  },
				{ 	name: '本月', value: 4  },
				{ 	name: '上月', value: 5  },
				{ 	name: '本周', value: 6  },
				{ 	name: '上周', value: 7  },
				{ 	name: '昨天', value: 8  },
				{ 	name: '今天', value: 9  },
			],
			infoCalendar: {
                insert: false,
                selected: []
            }
        }
    },
    onLoad() {
        // 跟进类型
        this.bus_task = JSON.parse(uni.getStorageSync('bus_task_status'))
        this.bus_task_status = convertToDict(this.bus_task)

        this.statusList = [...this.statusList, ...this.bus_task]


        const [start, end] = calculateDateRange(this.params.type);
        this.params.startTime = start
        this.params.endTime = end

		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        tabClick(item) {
            this.params.taskStatus = item.dictValue
            // dictValue
            this.refreshHandle()
        },
        refreshHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
            this.list = []
			// this.refresh = true
			this.getData()
		},
        getData() {
			this.$http.get('/app/followup_record/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        getBgColor(state) {
            let color;
            switch (state) {
                case '1001':
                color = 'rgba(103, 117, 133, 1)';
                break;
                case '1002':
                color = 'rgba(0, 186, 173, 1)';
                break;
                case '1003':
                color = 'rgba(255, 0, 28, 1)';
                break;
                default:
                color = 'rgba(103, 117, 133, 1)';
            }
            return color;
        },
        addHandle() {
			uni.navigateTo({
                url: '/pages/task/addTask'
            });
		},
        // 选择业务员
        selectHandle(type) {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectSalesmanMultiple',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        console.log(data)
                        that.tempSearchObj.staffId = data.data[0].userId
                        that.tempSearchObj.staffIdName = data.data[0].userName
                        that.tempSearchObj.avatar = data.data[0].avatar
                    },
                },
                success: function (res) {
                    let list = []
                    if (that.tempSearchObj.staffId) {
                        list = [
                            { 
                                userId: that.tempSearchObj.staffId,
                                userName: that.tempSearchObj.staffIdName,
                                avatar: that.tempSearchObj.avatar
                            }
                        ]
                    }
                    res.eventChannel.emit('emitDataHandle', { data: list, type: false })
                }
            });
        },
        clickItem(item) {
            uni.navigateTo({
                url: '/pages/task/taskDetails?id=' + item.id
            });
        },
        backHandle() {
            uni.navigateBack()
        },
        openHandle() {
			Object.keys(this.params).forEach(key => {
				if (this.tempSearchObj.hasOwnProperty(key)) {
					this.tempSearchObj[key] = this.params[key];
				}
			});
			uni.hideTabBar();
			this.$refs.popup.open()
		},
		reset() {
			this.tempSearchObj.type = 1

            this.tempSearchObj = {
				type: 1,
				startTime: null,
				endTime: null,
                staffId: null,
                staffIdName: null,
                avatar: null
			}
			const [start, end] = calculateDateRange(this.tempSearchObj.type);
			this.tempSearchObj.startTime = start
			this.tempSearchObj.endTime = end
			this.submit()
		},
		submit() {
			uni.showTabBar();
			this.$refs.popup.close()
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.refreshHandle()
		},
		maskClick() {
			uni.showTabBar();
			this.$refs.popup.close()
		},
		// 打开日历
		openCalendar(type) {
			this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
			if(e.range.before && e.range.after) {
				let arr = []
				arr[0] = e.range.before? e.range.before : null
				arr[1] = e.range.after? e.range.after : null
				this.tempSearchObj.startTime = arr[0]
				this.tempSearchObj.endTime = arr[1]
			} else {
				this.tempSearchObj.startTime = null
				this.tempSearchObj.endTime = null
				return
			}
			this.tempSearchObj.type = null
        },
        // 关闭日历
        closeCalendar() { },
		changeTime(type) {
			this.tempSearchObj.type = type
			const [start, end] = calculateDateRange(type);
			this.tempSearchObj.startTime = start
			this.tempSearchObj.endTime = end
		}
    }
}
</script>

<style lang="scss" scoped>
/deep/.u-sticky {
	z-index: 10 !important;
}
.tab-box {
    width: 100%;

    /deep/.u-tabs__wrapper__nav__item {
        flex: 1;
    }

    /deep/.u-tabs__wrapper__nav__line {
        background: rgba(77, 172, 177, 1) !important;
    }
}

.schedule-day-list {
    padding: 0 32rpx;

    .schedule-day-list-item {
        display: flex;
        align-items: center;
        margin-top: 32rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        height: 200rpx;

        .schedule-day-list-item-left {
            width: 20rpx;
            height: 100%;
            border-radius: 40rpx 0 0 40rpx;
            background: rgba(103, 117, 133, 1);
            // margin-right: 16rpx;
        }

        .schedule-day-list-item-content {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 32rpx;
            .item-content-box {
                width: 0;
                flex: 1;

                .item-content-box-time {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(103, 117, 133, 1);
                    margin-bottom: 20rpx;
                }

                .item-content-box-text {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                    margin-bottom: 8rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .item-content-box-avatar {
                    display: flex;
                    text {
                        margin-left: 8rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(103, 117, 133, 1);
                    }
                }
            }

            .item-state-box {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-left: 40rpx;
            }
        }
    }

}
.drawer-box {
	width: 622rpx;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: white;

	.drawer-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 24rpx;

		.drawer-classify {
			display: flex;
			flex-wrap: wrap;

			>view {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(103, 117, 133, 1);
				border-radius: 16rpx;
				background: #FFFFFFFF;
				border: 2rpx solid #67758566;
				padding: 16rpx 0;
				width: 174rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				text-align: center;
			}

			:nth-child(3n) {
				margin-right: 0;
			}

			.active {
				border: none;
				background: #4DACB1FF;
				color: rgba(255, 255, 255, 1);
			}
		}
		.search-item-box {
			/deep/.u-form-item__body__right {
				border: 2rpx solid rgba(103, 117, 133, 0.4);
				padding: 16rpx 16rpx;
				border-radius: 8rpx;
			}
		}
	}

	.drawer-footer {
		padding: 24rpx;
		display: flex;

		>view {
			border-radius: 8rpx;
			text-align: center;
			height: 44px;
			line-height: 44px;
			font-size: 32rpx;
			font-weight: 500;
		}

		.drawer-footer-res {
			height: 42px;
			width: 154rpx;
			background: #FFFFFFFF;
			border: 3rpx solid #4DACB1FF;
			color: rgba(77, 172, 177, 1);
			margin-right: 20rpx;
		}

		.drawer-footer-sub {
			flex: 1;
			background: #4DACB1FF;
			color: #FFFFFFFF;
		}
	}
}
</style>